<template>
  <div class="room-type-v3">
    <img :src="item.image?.url" alt="">
    <div class="location">
        <img src="@/assets/img/home/location.png" alt="">
        {{ item.location }}
    </div>
    <div class="content">
        <div class="houseName">
            {{ item.houseName }}
        </div>
        <div class="summaryText">
            {{ item.summaryText }}
        </div>
        <div class="price">
            <div class="finalPrice">￥ {{ item.finalPrice }}</div>
            <div class="productPrice">￥ {{ item.productPrice }}</div>
            <div class="priceTag">{{ item.priceTipBadge?.text }}</div>
        </div>
    </div>
  </div>
</template>

<script setup>
    import {defineProps} from "vue"
    defineProps({
        item:{
            type:Object,
            default:{}
        }
    })
</script>

<style lang="less" scoped>
    .room-type-v3 {
        width: 45vw;
        padding: 5px;

        img {
            width: 100%;
        }

        .location {
            padding: 10px 20px;
            color: #777;
            img {
                width: 15px;
            }
        }
        .content {
            padding: 3px;
            .houseName{
                font-size: 16px;
                margin-bottom: 5px;
                margin: 5px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .summaryText {
                color: #777;
                margin-bottom: 5px;
            }
            .price {
                display: flex;
                .finalPrice {
                    color: orange;
                    font-size: 16px;
                    padding-right: 6px;
                }
                .productPrice {
                    text-decoration: line-through;
                    color: #777;
                    font-style: 12px;
                    padding-right: 6px;
                }
                .priceTag {
                    font-size: 14px;
                    background-image: linear-gradient(270deg,#f66,#ff9f9f);
                    color: #fff;
                    border-radius: 8px;
                    padding: 0 5px;
                    text-align: center;
                }
            }
        }

    }
</style>